<template>
  <div>
    <p class="title">广告列表</p>
    <div class="search-box">
      <div>
        <label>状态：</label>
        <el-select v-model="state" size="small" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
            :disabled="item.disabled">
          </el-option>
        </el-select>
      </div>
      <el-button type="primary" size="small" @click="toAdd">新建</el-button>
    </div>
    <!-- 表格 -->
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark">

      <el-table-column label="序号" width="80" type="index"></el-table-column>
      <el-table-column prop="adverName" label="广告名称">

      </el-table-column>
      <el-table-column prop="hits" label="点击量">
      </el-table-column>
      <el-table-column prop="creatername" label="创建人">
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.state==1">上架</span>
          <span v-else-if="scope.row.state==2">下架</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <div class="handle">
            <el-button type="text" @click="checkout(scope.row.adverId)">查看</el-button>
            <el-button type="text" @click="updateAdvertisementState(scope.row.adverId,2)" v-if="scope.row.state == 1">下架</el-button>
            <el-button type="text" @click="updateAdvertisementState(scope.row.adverId,1)" v-else-if="scope.row.state == 2">上架</el-button>
          </div>
        </template>
      </el-table-column>

    </el-table>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNumber"
      :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>


  </div>
</template>

<script>
import apis from "../../../apis/modules/advertisement"
import banner from "@/apis/modules/banner";
  export default {
    data() {
      return {
        state: 'all',
        dialogFormVisible: false,
        form: {},
        options: [{ value: 'all', label: "全部" }, { value: '1', label: "上架" }, { value: '2', label: "下架" }],
        pageNumber: 1,
        pageSize: 10,
        total: 0,
        tableData: [],

      };
    },
    created() {
      this.getAdvertisement()
    },
    methods: {
      toAdd(){
        this.$router.push({path:'/Home/AdvertisingInfo'})
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      checkout(adverId) {
        this.$router.push('/Home/AdvertisingInfo?adverId='+adverId)
      },
      //  修改广告当前状态
      async updateAdvertisementState(adverId,state){
        const { code, data, msg } = await apis.updateAdvertisementState({
          adverId : adverId,
          state : state
        })
        if(code == 200){
          this.getAdvertisement();
        }
      },
      //  广告列表
      async getAdvertisement() {
        const res = await apis.getAdvertisement(this.state, this.pageNumber, this.pageSize).then((res) => {
          if (res.code == 200) {
            this.total = res.data.count;
            this.tableData = res.data.list
            return res
          }
        })
      },
    },
    // async mounted(){
    //      const res = await apis.getAdvertisement(this.state, this.pageNumber, this.pageSize).then((res) => {
    //      if (res.code == 200) {
    //        this.tableData = res.data.list;
    //         return res
    //      }
    //    });
    // }
  };
</script>

<style lang="scss" scoped>
  .search-box {
    margin: 32px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>
